<template>
  <div class="outfit_mian">
    <div class="outfit_row">
      <div
        class="outfit_for"
        @click="hanldgo(item.path)"
        v-for="item in navlist"
        :key="item.id"
      >
        <div class="item_img">
          <img :src="item.img" alt="" />
        </div>
        <div class="item_titel">{{ item.titel }}</div>
      </div>
    </div>
    <el-dialog
      title="请仔细阅读以下条款"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="diallog_list">
        <div>1.搭建商与参展商一定要在布展期间在线上确认好需要我公司开具的发票内容</div>
        <div>2.我公司开出的发票统一为二联《增值税 普通 发票》如需开具三联《增值税 专用发票》请在线上事先准确无误的登记好开票资料后，我公司将于 <span style="color:#ff0000">1-2个月</span> 后开出快递给到贵公司</div>
        <div>
          3.各项费用合计 <span  style="color:#ff0000">低于1000元以下</span> 的，我公司只开具《电子普通发票》，不提供《增值税专用发票》
        </div>
        <div></div>
        4.一个公司发票抬头只开具 一张发票，请在 同一时段提交发票申请，以便我司进行开票金额的合并。
        <div>
          5.以下费用由我公司提供发票：<span style="color:#ff0000">  水、电、气费、管理费、审图费、展具租赁费、施工证、加班费</span>，此费用在我公司开具发票
        </div>
        <div>6.认真核对开票名称、金额是否正确，如发现错误请及时与主场相关人员联系</div>
        <div>
          7.开票内容： <span style="color:#ff0000">*会展服务*展览服务费</span> 
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <!-- hanldgo('/invoiceIndex') -->
        <el-button type="danger" @click="dilgadd"
          >同 意</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navlist: [
        {
          id: 1,
           titel: "资料下载",
          path: "/outdownfile",
          img: require("../../../static/images/outfit/home_ic_zlxz.png"),
        },
        {
          id: 2,
         titel: "特装审图",
          path: "/examine",
          img: require("../../../static/images/outfit/home_ic_tzst.png"),
        },
        {
          id: 3,
          titel: "租赁服务",
          path: "/lease",
          img: require("../../../static/images/outfit/home_ic_zlfw.png"),
        },
        {
          id: 4,
          titel: "费用缴纳",
          path: "/booth",
          img: require("../../../static/images/outfit/home_ic_fyjn.png"),
        },
        {
          id: 5,
          titel: "防疫管理",
          path: "/fygl",
          img: require("../../../static/images/outfit/home_ic_fpsq.png"),
        },
        {
          id: 6,
          titel: "发票申请",
          path: "",
          img: require("../../../static/images/outfit/home_ic_fpsq.png"),
        },
        {
          id: 7,
          titel: "撤展验收",
          path: "czys",
          img: require("../../../static/images/outfit/home_ic_czys.png"),
        },
        {
          id: 8,
          titel: "押金退还",
          path: "/foregift",
          img: require("../../../static/images/outfit/home_ic_yjtk.png"),
        },
      ],
      dialogVisible:false
    };
  },
  methods: {
    hanldgo(path) {
      if(path =="false"){
        this.$message.warning('正在开发中')
      } else if (path) {
        this.$router.push(path);
      }
       else {
        this.dialogVisible =true
      }
    },
    dilgadd(){
      this.dialogVisible =false
      this.$router.push('/invoiceIndex');
    },
    handleClose(){
      this.dialogVisible =false
    }
  },
};
</script>
<style scoped>
.outfit_mian {
  background-color: #f2f2f2;
  padding: 100px 0;
}
.outfit_row {
  background-color: #fff;
  width: 1000px;
  margin: auto;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-wrap: wrap;
  padding: 40px;
}
.outfit_for {
  width: 22%;
  /* margin: 40px 0px 0 10px; */
  padding: 10px;
}
.outfit_for:hover {
  cursor: pointer;
  border: 1px solid #e0e2e6;
  box-shadow: 0 0 9px 3px rgb(190, 189, 189);
}
.item_img > img {
  width: 80px;
   height: 80px;
  object-fit: contain;
}
.item_img {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.item_titel {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.diallog_list {
  line-height: 30px;
}
</style>